<template>
  <div class="denglu">
    <el-card class="box-card" style="margin: 200px auto">
      <div class="card-header" style="background-color:white">
        <span>ecb</span>
      </div>

      <div class="text item">
        <el-tabs
          v-model="activedz"
          stretch
          type="card"
          @tab-click="handleTabsClick"
        >
          <el-tab-pane label="登录" name="denglu">
            <el-form
              label-width="80px"
              ref="ruleform"
              :model="ruleform"
              status-icon
              :rules="rules"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleform.username" type=""></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="ruleform.password"
                  type="password"
                ></el-input>
              </el-form-item>

              <el-button type="primary" @click="submitform('ruleform')"
                >登录</el-button
              >
              <el-button type="primary" @click="resetform('ruleform')"
                >重置</el-button
              >
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="zhuce">
            <el-form
              label-width="80px"
              ref="registerform"
              :model="registerform"
              status-icon
              :rules="rules"
            >
              <el-form-item label="用户名" prop="username1">
                <el-input v-model="registerform.username1" type=""></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="registerform.password"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="password1">
                <el-input
                  v-model="registerform.password1"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="registerform.email" type=""></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="registerform.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-button type="primary" @click="submitform('registerform')"
                >注册</el-button
              >
              <el-button type="primary" @click="resetform('registerform')"
                >重置</el-button
              >
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import {  ElNotification } from "element-plus";
import axios from 'axios'
export default {
  setup(){

  },
  data() {
    //验证规则
    const validateusername = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    const validateusernames = (rule, value, callback) => {
  
            axios({
              url: "/usercheckname",
              method: "get",
              params: {
                name: value,
              },
            }).then((res) => {
              if(value === ""){
                  return callback(new Error("不能为空"));
              }
              if (res.data.code == 200) {
                callback();
              } else {
                
                return callback(new Error("用户名已存在"));
                
              }
            });
     
    };
    const validatepassword = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    const validatepassword1 = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请再次输入密码"));
      } else if (value !== this.registerform.password) {
        return callback(new Error("两次密码不一样"));
      } else {
        callback();
      }
    };
    return {
      activedz: "denglu",
      labelPosition: "right",
      ruleform: {
        username: "",
        password: "",
      },
      registerform: {
        username1: "",
        password: "",
        password1: "",
        email: "",
        gender: "",
      },
      activetab: "denglu",
      //验证
      rules: {
        username: [{ validator: validateusername, trigger: "blur" }],
        username1: [{ validator: validateusernames, trigger: "blur" }],
        password: [{ validator: validatepassword, trigger: "blur" }],
        password1: [{ validator: validatepassword1, trigger: "blur" }],
        email: [{ validator: validateusername, trigger: "blur" }],
        gender: [{ validator: validateusername, trigger: "blur" }],
      },
    };
  },
  methods: {
    //   ...mapMutations(['changeLogin']),

    handleTabsClick(tab) {
      this.activetab = tab.props.name;
      console.log(tab.props.name);
    },
    submitform(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.activetab === "denglu") {
            var param = this.ruleform;
            // var param = param)
            // console.log(this.proxy)
            axios({
                url: "/userlogin",
                method: "post",
                params: {
                  username: param.username,
                  password: param.password,
              },
            }).then((res)=>{
              if (res.data.code == 200) {
                ElNotification({
                                title: "成功",
                                message: "登录成功",
                                type: "success",
                                duration: 2000,
                            });
               window.sessionStorage.setItem('token', JSON.stringify(res.data.data.username))
               this.$router.push("/");
              } else {
                console.log("登陆失败");
              }
            });

          }

          if (this.activetab === "zhuce") {
            var param1 = this.registerform;
           
            axios({
              url: "/userregister",
              method: "post",
              params: {
                username: param1.username1,
                password: param1.password,
                email: param1.email,
                gender:param1.gender,
              },
            }).then((res) => {
              if (res.data.code == 200) {
                  
                alert("注册成功");
              } else {
                console.log("注册失败");
              }
            });


          }
        } else {
          alert("请输入正确的格式");
          return false;
        }
        return true;
      });
    },

    resetform(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.card-header {
  font-size: 40px;
}
.denglu {
  margin: 0 auto;
  text-align: center;
}
.box-card {
  width: 500px;
  margin: 100px aotu !important;
}
</style>
